<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
		<link href="css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/comment.css" />
		<link rel="stylesheet" type="text/css" href="css/equipment.css" />
	</head>

	<body>
		<div id="app">
			<header class="mui-bar mui-bar-nav gradient">
				<div style="height: 20px;"></div>
				<div class="mui-action-back mui-pull-left mui-icon mui-icon-arrowleft" style="color: white;"></div>
				<h1 class="mui-title">设备</h1>
				<div class="mui-pull-right mui-icon warnInfo">
					<img src="images/tnotice.png" class="imgret">
				</div>
			</header>
			<!-- 设备信息 -->
			<div class="eq_info">
				<div class="top">
					<img class="logo" src="images/teq01.jpg">
					<div>
						<strong class="title">{{dataList.DeviceName}}</strong>
						<div>
							<small>设备编号：</small>
							<small>{{dataList.DeviceNO}}</small>
						</div>
					</div>
				</div>
				<div class="center">
					<div class="state">{{dataList.Status==1?"正常运行":"异常"}}</div>
					<div>
						<div class="mui-switch mui-disabled" :class="{'mui-active':dataList.Status==1?true:false}">
							<div class="mui-switch-handle"></div>
						</div>
					</div>
				</div>
				<div class="bottom">
					<div class="item">
						<div class="title">型号规格</div>
						<div>
							<img src="images/teq02.png">
							<small class="normal">{{dataList.Secifications}}</small>
						</div>
					</div>
					<div class="item border">
						<div class="title">使用部门</div>
						<div>
							<img src="images/teq03.png">
							<small class="normal">{{dataList.UseDept}}</small>
						</div>
					</div>
					<div class="item">
						<div class="title">安装地点</div>
						<div>
							<img src="images/teq01.png">
							<small class="normal">{{dataList.InstallAddress}}</small>
						</div>
					</div>
				</div>
			</div>
			<!-- 设备数据 -->
			<div class="eq_data">
				<strong class="eqtitle">
					<div class="line"></div>
					<div>设备数据</div>
				</strong>
				<div class="itembox">
					<div class="item" data-href="eqChart">
						<img src="images/teq01.jpg">
						<div>流程图</div>
					</div>
					<div class="item" data-href="dataHistory">
						<img src="images/teq02.jpg">
						<div>历史数据</div>
					</div>
					<div class="item" data-href="dataNow">
						<img src="images/teq03.jpg">
						<div>实时数据</div>
					</div>
					<div class="item" data-href="eqParameter">
						<img src="images/teq04.jpg">
						<div>设备参数</div>
					</div>
				</div>
			</div>
			<!-- 报警信息 -->
			<div class="eq_warn">
				<strong class="eqtitle">
					<div class="line"></div>
					<div class="title">报警信息</div>
					<span class="icon mui-icon mui-icon-arrowright warnBtn"></span>
				</strong>
				<div class="warn_item warn_warn">
					<div class="warn_title">煤炭比</div>
					<div class="warn_box">
						<img class="img" src="images/teq05.jpg">
						<div class="warn_center">
							<div>
								<span>实际得分/值：</span>
								<span>60/3500</span>
							</div>
							<div>
								<span>最佳得分范围：</span>
								<span>100-350</span>
							</div>
						</div>
						<img class="btm_img" src="images/teq06.jpg">
					</div>
				</div>
				<div class="warn_item warn_normal">
					<div class="warn_title">煤炭比</div>
					<div class="warn_box">
						<img class="img" src="images/teq08.jpg">
						<div class="warn_center">
							<div>
								<span>实际得分/值：</span>
								<span>60/3500</span>
							</div>
							<div>
								<span>最佳得分范围：</span>
								<span>100-350</span>
							</div>
						</div>
						<img class="btm_img" src="images/teq07.jpg">
					</div>
				</div>
			</div>
		</div>
		<script src="js/mui.js"></script>
		<script src="js/jquery.js"></script>
		<script src="js/rem.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
		<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data: {
					url: "http://112.54.80.235:8038",
					dataList: {},
					DevNo: ''
				},
				methods: {

				},
				mounted() {
					console.log(this.url);
					mui.init()
					mui.plusReady(function() {
						//关闭等待框
						plus.nativeUI.closeWaiting();
						var self = plus.webview.currentWebview();
						app.$data.DevNo = self.proid;
						axios.get(app.$data.url + '/actionapi/Users/SJGetSheBei', {
								params: {
									DevNo: app.$data.DevNo
								}
							})
							.then(function(response) {
								var data = response.data.data;
								app.$data.dataList = data[0];
							})
							.catch(function(error) {
								console.log(error);
							});
						//四流程
						$('.itembox .item').click(function() {
							var href = $(this).attr("data-href");
							mui.openWindow({
								url: href + '.html',
								id: href + '.html',
								extras: {
									proid: app.$data.DevNo
								},
								waiting: {
									autoShow: true, //自动显示等待框，默认为true
									title: '正在加载...', //等待对话框上显示的提示内容
								}
							})
						});
						//报警信息
						$('.warnBtn').click(function() {
							mui.openWindow({
								url: 'alarmMessage.html',
								id: 'alarmMessage.html',
								extras: {
									proid: app.$data.DevNo
								},
								waiting: {
									autoShow: true, //自动显示等待框，默认为true
									title: '正在加载...', //等待对话框上显示的提示内容
								}
							})
						});
						//报警按钮
						//报警按钮
						$('.warnInfo').click(function(){
							mui.openWindow({
								url: "alarmDetail.html",
								id: "alarmDetail.html",
								waiting: {
									autoShow: true, //自动显示等待框，默认为true
									title: '正在加载...', //等待对话框上显示的提示内容
								}
							})
						});
					});

				}

			})
		</script>
	</body>

</html>
